<template>
  <div class="app-container">
    <!--    查询组件-->
    <div style="height: auto">
      <div style="">
        <div>
          <el-form>
            <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQuery" >查询</el-button>
            <el-select clearable placeholder="状态" v-model="QueryData.status" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
              <el-option
                v-for="itemquery in optionsquery"
                :key="itemquery.label"
                :label="itemquery.label"
                :value="itemquery.value">
              </el-option>
            </el-select>
            <el-input v-model="QueryData.correlationRateb" placeholder="到"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="QueryData.correlationRatea" placeholder="占用率从" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="QueryData.billNum" placeholder="发票编号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="QueryData.contractNum" placeholder="合同编号" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
            <el-input v-model="QueryData.buyUnit" placeholder="采购单位" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
          </el-form>
        </div>
      </div>
    </div>
    <!--    表格组件-->
    <el-table
      ref="bigTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <!-- 展开折叠部分 -->
      <el-table-column type="expand" width="1" style="display: none;border-right: 0px solid #ebeef5">
        <el-table
          :data="BillTableData"
          style="width: 100%"
          max-height="250">

          <el-table-column
            fixed
            label="品名"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.typeName}}
            </template>
          </el-table-column>
          <el-table-column
            label="商品名称"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.goodsName}}
            </template>
          </el-table-column>
          <el-table-column
            label="型号"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.modle}}
            </template>
          </el-table-column>
          <el-table-column
            label="单价"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.goodsUnitPrice}}
            </template>
          </el-table-column>
          <el-table-column
            label="关联数量"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.goodsAccount}}
            </template>
          </el-table-column>
          <el-table-column
            label="发票编号"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.purchanseBillNum}}
            </template>
          </el-table-column>
          <el-table-column
            label="合同编号"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.purchanseContractNum}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作者"
            width="120">
            <template slot-scope="scopeBill">
              {{scopeBill.row.createAdminTrueName}}
            </template>
          </el-table-column>
          <el-table-column
            label="操作日期"
            width="160">
            <template slot-scope="scopeBill">
              {{scopeBill.row.createDate}}
            </template>
          </el-table-column>
          <el-table-column
            label="占用类型"
            width="120">
            <template slot-scope="scopeBill">
              <span v-if="scopeBill.row.correlationType==0" >成本占用</span>
              <span v-if="scopeBill.row.correlationType>=1" >补票占用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="80">
            <template slot-scope="scopeBill">
              <span v-if="scopeBill.row.status==0">正常</span>
              <span v-if="scopeBill.row.status>=1">作废</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="240">
            <template slot-scope="scopeBill">
              <el-button
                v-if="scopeBill.row.status==0"
                type="primary"
                @click.native.prevent="handleCorstuts(scopeBill.$index)"
                size="small">
                作废
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-table-column>

      <el-table-column label="采购单位" width="170">
        <template slot-scope="scope">
          {{ scope.row.buyUnit }}
        </template>
      </el-table-column>
      <el-table-column label="销售合同编号" width="170">
        <template slot-scope="scope">
          {{ scope.row.contractNum }}
        </template>
      </el-table-column>
      <el-table-column label="发票编号" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.billNum}}
        </template>
      </el-table-column>
      <el-table-column label="开票日期" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.billDate }}
        </template>
      </el-table-column>
      <el-table-column label="发票类型" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.billType }}
        </template>
      </el-table-column>
      <el-table-column label="发票金额" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.billAccount }}
        </template>
      </el-table-column>
      <el-table-column label="关联率" width="170" align="center">
        <template slot-scope="scope">
          {{ scope.row.correlationRate }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="170" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0"> 待完成</span>
          <span v-if="scope.row.status == 1"> 已完成</span>
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" width="250">
        <template slot-scope="scope">
          <!--          {{ scope.row.operate }}-->
          <el-button size="small" plain style="float: left" @click="toogleExpand(scope.row)">详情</el-button>
          <el-button size="small" v-if="scope.row.status == 0&&scope.row.billstatus==1" type="primary" style="float: left" @click="handleDrawer(scope.row.billNum)">关联</el-button>
          <el-button size="small" v-if="scope.row.status == 0&&scope.row.billstatus==1" @click="handleBillstuts(scope.row.billNum)" type="primary" style="float: left" >完成</el-button>

        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>


    <!--关联发票抽屉-->
    <el-drawer
      :before-close="cancel"
      title="发票关联"
      size="50%"
      :visible.sync="drawer">


      <template>
        <el-tabs v-model="activeName" style="margin-left: 15px">
          <el-tab-pane label="关联明细" name="first">
            <!--            关联明细表格组件-->
            <el-table
              :data="billCorData"
              border
              fit
              highlight-current-row
              max-height="500"
              height="500"
            >
              <el-table-column label="品名" width="80">
                <template slot-scope="scope">
                  {{ scope.row.typeName }}
                </template>
              </el-table-column>
              <el-table-column label="商品名称" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.goodsName}}
                </template>
              </el-table-column>
              <el-table-column label="型号" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.modle }}
                </template>
              </el-table-column>
              <el-table-column label="单价" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.goodsUnitPrice }}
                </template>
              </el-table-column>
              <el-table-column label="剩余数量" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.remainAccount }}
                </template>
              </el-table-column>
              <el-table-column label="关联数量" width="80" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.correlationAccount"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="发票编号" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.billNum }}
                </template>
              </el-table-column>
              <el-table-column label="合同编号" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.contractNum }}
                </template>
              </el-table-column>
              <el-table-column label="备注信息" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.remakes }}
                </template>
              </el-table-column>
              <el-table-column label="操作"  align="center" width="100">
                <template slot-scope="scope">
                  <el-button plain style="float: left" @click="handlechosedDel(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

          </el-tab-pane>
          <el-tab-pane label="查询" name="second">
            <!--            关联查询组件-->
            <el-form>
              <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQueryP" >查询</el-button>
              <el-input v-model="QueryP.modle" placeholder="型号" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
              <el-input v-model="QueryP.goodsName" placeholder="商品名称" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary" ></el-input>
              <el-input v-model="QueryP.typeName" placeholder="品名"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
              <el-input v-model="QueryP.supplier" placeholder="供应商" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
              <el-select clearable placeholder="请选择" v-model="QueryP.status" style="display: inline-block;float: right;width: 130px;margin-right: 5px">
                <el-option
                  v-for="itemquery in options"
                  :key="itemquery.label"
                  :label="itemquery.label"
                  :value="itemquery.value">
                </el-option>
              </el-select>
            </el-form>
            <!--            关联查询表格组件-->
            <el-table
              :data="billData"
              border
              fit
              highlight-current-row
              max-height="500"
              height="500"
            >

              <el-table-column label="供应商" width="80">
                <template slot-scope="scope">
                  {{ scope.row.supplier }}
                </template>
              </el-table-column>
              <el-table-column label="品名" width="80">
                <template slot-scope="scope">
                  {{ scope.row.typeName }}
                </template>
              </el-table-column>
              <el-table-column label="商品名称" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.goodsName}}
                </template>
              </el-table-column>
              <el-table-column label="型号" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.modle }}
                </template>
              </el-table-column>
              <el-table-column label="单价" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.goodsUnitPrice }}
                </template>
              </el-table-column>
              <el-table-column label="剩余数量" width="80" align="center">
                <template slot-scope="scope">
                  {{ scope.row.remainAccount }}
                </template>
              </el-table-column>
              <el-table-column label="发票编号" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.billNum }}
                </template>
              </el-table-column>
              <el-table-column label="合同编号" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.contractNum }}
                </template>
              </el-table-column>
              <el-table-column label="备注信息" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.remakes }}
                </template>
              </el-table-column>
              <el-table-column label="操作"  align="center" width="100">
                <template slot-scope="scope">
                  <el-button plain style="float: left" @click="handlechosed(scope.$index)">选择</el-button>
                </template>
              </el-table-column>
            </el-table>



          </el-tab-pane>
        </el-tabs>
      </template>

      <div >

        <el-button @click="cancel">取消</el-button>

        <el-button type="primary" @click="handleBill()">确定</el-button>

      </div>




    </el-drawer>

  </div>
</template>

<script>
import api from '@/api/cost'
import billapi from '@/api/billManage'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      contractData: { },
      QueryData:{ },
      QueryP: {},
      list: [],
      BillTableData: [],
      listLoading: true,
      //下拉选项
      optionsquery: [{
        value: '0',
        label: '待完成'
      }, {
        value: '1',
        label: '已完成'
      }],
      options: [{
        value: '过单',
        label: '过单'
      }, {
        value: '进货',
        label: '进货'
      }, {
        value: '进票',
        label: '进票'
      }],
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
      drawer: false,
      activeName: 'second',
      billCorData:[],
      billData:[],
      nullarray:[],
      addbillNum: null

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //关联发票查询
    handleQuery() {
      let Querydata1 = new FormData()
      Querydata1.append("currentPage", this.pagination.currentPage)
      Querydata1.append("pageSize", this.pagination.pageSize)
      if (this.QueryData.status != null && this.QueryData.status != "")
        Querydata1.append("status", this.QueryData.status)
      if (this.QueryData.correlationRatea != null && this.QueryData.correlationRatea != "" && this.QueryData.correlationRateb != null && this.QueryData.correlationRateb != "") {
        Querydata1.append("correlationRatea", this.QueryData.correlationRatea)
        Querydata1.append("correlationRateb", this.QueryData.correlationRateb)
      }
      if (this.QueryData.billNum != null && this.QueryData.billNum != "")
        Querydata1.append("billNum", this.QueryData.billNum)
      if (this.QueryData.contractNum != null && this.QueryData.contractNum != "")
        Querydata1.append("contractNum", this.QueryData.contractNum)
      if (this.QueryData.buyUnit != null && this.QueryData.buyUnit != "")
        Querydata1.append("buyUnit", this.QueryData.buyUnit)
      api.Query(Querydata1).then(resp => {
          this.list = resp.data.List
          this.pagination.currentPage = resp.data.page.number + 1
          this.pagination.pageSize = resp.data.page.size
          this.pagination.total = resp.data.page.totalElements
          this.listLoading = false
        }
      )

    },
    //关联发票抽屉中的查询
    handleQueryP() {
      api.QueryPur(this.QueryP).then(resp => {
          this.billData = resp.data.List
        }
      )
    },
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //查询所有
    getAll() {
      billapi.getList(this.pagination).then(response => {
          this.list = response.data.List
          this.pagination.currentPage = response.data.page.number + 1
          this.pagination.pageSize = response.data.page.size
          this.pagination.total = response.data.page.totalElements
          this.listLoading = false
        }
      )
    },

    fetchData() {
      this.listLoading = true

      this.getAll()
    },
    //弹出抽屉
    handleDrawer(billNum) {
      this.drawer = true
      this.addbillNum = billNum
    },
    //强制完成
    handleBillstuts(billNum){
      api.billStatusfinish(billNum).then(res=>{
        this.getAll()
      })
    },
    //关联发票抽屉中的选中
    handlechosed(index) {

      this.nullarray =[];
      console.log(index)
      this.billCorData.push(this.billData[index])
      delete this.billData[index]
      for (let i = 0; i < this.billData.length; i++) {
        if(i != index){
          this.nullarray.push(this.billData[i])
        }
      }
      this.billData = this.nullarray

    },
    //关联发票抽屉中的删除
    handlechosedDel(index) {
      delete this.billCorData[index]
      if(this.billCorData.length==1)this.billCorData.pop()
      else{
        for (let i = 0; i < this.billCorData.length - 1; i++) {
          if(i>=index){
            this.billCorData[i] = this.billCorData[i+1]
          }
          if(i==this.billCorData.length - 2){
            this.billCorData.pop()
          }
        }
      }
    },
    //取消按钮
    cancel() {
      this.drawer = false
      this.contractData = {}
      this.billData = []
      this.billCorData = []
      this.QueryP = {}
    },
    //发票关联保存
    handleBill() {
      let k = 0;
      for (let i = 0; i < this.billCorData.length; i++) {
        this.billCorData[i].saleBillNum = this.addbillNum
        if(this.billCorData[i].remainAccount - this.billCorData[i].correlationAccount < 0){
          k++;
        }
      }
      if(k > 0){
        this.$message.warning("请输入正确的关联值")
      }
      else {
        billapi.addCor(this.billCorData).then(res=>{
          this.cancel()
          this.getAll()
        })
      }
    },
    //作废发票关联操作
    handleCorstuts(index) {
      api.BillCorDel(this.BillTableData[index].id).then(res=>{
        this.getAll()
      })
    },
    //弹出折叠面板
    toogleExpand(row) {
      this.BillTableData = []
      api.getBillById(row.id).then(res => {
        // this.BillTableData = res.data.BillTableData
        if (res.data.BillTableData != null && res.data.BillTableData.length > 0) {
          for (let i = 0; i < res.data.BillTableData.length; i++) {
            this.BillTableData.push(res.data.BillTableData[i]);
          }
        }
      })

      const bigTable = this.$refs.bigTable
      // 注意，这里的 this.list 是上面 data 中的 list
      // 通过比对数据与行里的数据，对展开行进行控制，获取对应值
      this.list.map((item) => {
        if (row.id !== item.id) {
          bigTable.toggleRowExpansion(item, false)
        }
      })
      bigTable.toggleRowExpansion(row)
    }
  },
  computed: {

  }
}
</script>
